<template>
    <div id="mine">
        <header>
            <div>个人中心</div>
            <img src="http://rainbow.paint-future.com/static/m/imgs/s-head.png" alt="">
            <div>遇见你</div>
        </header>
        <div class="my">
            <img src="../assets/订单.png" alt="">
            <span>我的请假</span>
        </div>
        <div class="banner">
            <ul>
                <li>
                    <img src="../assets/新建文件.png" alt="">
                    <p>新建</p>
                </li>
                <li>
                    <img src="../assets/审核中.png" alt="">
                    <p>审核中</p>
                </li>
                <li>
                    <img src="../assets/待确认.png" alt="">
                    <p>待确认</p>
                </li>
                <li>
                    <img src="../assets/已完成.png" alt="">
                    <p>已完成</p>
                </li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li>
                    <img src="../assets/mine/审批请假.png" alt="">
                    <span>审批请假</span>
                    <span class="fa fa-angle-right"></span>
                </li>
                <li>
                    <img src="../assets/mine/临时权限.png" alt="">
                    <span>临时权限</span>
                    <span class="fa fa-angle-right"></span>
                </li>
                <li>
                    <img src="../assets/mine/位置.png" alt="">
                    <span>我的轨迹</span>
                    <span class="fa fa-angle-right"></span>
                </li>
                <li>
                    <img src="../assets/mine/上传到云端.png" alt="">
                    <span>上报位置</span>
                    <span class="fa fa-angle-right"></span>
                </li>
                <li>
                    <img src="../assets/mine/历史.png" alt="">
                    <span>查看历史</span>
                    <span class="fa fa-angle-right"></span>
                </li>
                <li>
                    <img src="../assets/mine/修改密码.png" alt="">
                    <span>修改密码</span>
                    <span class="fa fa-angle-right"></span>
                </li>
                <li>
                    <img src="../assets/mine/笑脸.png" alt="">
                    <span>退出</span>
                    <span class="fa fa-angle-right"></span>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    export default {
        name: "mine"
    }
</script>

<style scoped>
    #mine{
        background: #f0f0f0;
    }
    header {
        text-align: center;
        background: blueviolet;
        padding: 6vw 0;
        color: white;
    }
    header img{
        margin: 2vw 0;
    }
    .banner{
        padding: 0 4vw;
        background: white;
        margin-bottom: 6vw;
    }
    .my{
        display: flex;
        align-items: center;
        padding:  4vw 0;
        border-bottom: 1px solid #ccc;
        background: white;
        font-size: 5vw;
        padding-left: 4vw;
    }
    .my img{
        margin-right: 4vw;
        width: 10vw;
        height: 10vw;
    }
    .banner>ul{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-top: 6vw;
    }
    .banner ul img{
        width: 10vw;
        height: 10vw;
    }
    .content{
        padding: 0 4vw;
        background: white;

    }
    .content>ul>li{
        width: 100%;
        height: 20vw;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        font-size:5vw;
        position: relative;
    }
    .content img{
        width: 8vw;
        height: 8vw;
        margin-right: 4vw;
    }
    .content span:last-child{
        display: block;
        font-size: 10vw;
        position: absolute;
        right: 0;
        color: #eeeeee;
    }

</style>
